<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery.cookie</title>
<script src="http://www.jq22.com/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.cookie.js" type="text/javascript"></script>
<style type="text/css">
*{ margin: 0px; }
.ck{ width: 500px; height: 200px; border: 1px solid #D9D9D9; margin-left: auto; margin-right: auto; padding: 20px; margin-top: 10%; }
h3{ text-align: center; }
</style>
</head>

<body>






<div class="ck">
	
</div>
<h3 id="but">删除cookie</h3>
<script>
	//创建一个cookie并设置有效时间为7天:
	$.cookie('the_cookie', 'the_value', { expires: 7 });
	//读取cookie:
	//$.cookie('the_cookie');
	$(".ck").html("当前cookie设置的值为："+$.cookie('the_cookie'));	

	$("#but").click(function(){
	  		$.cookie('the_cookie', null); 
			alert("当前cookie设置的值为："+$.cookie('the_cookie'))
	});
	
	
</script>


</body>
</html>
